<template>
        <!-- 列表页面 -->
        <div class="container" v-if="!showEdit && !showList && !showListOne">
            <div class="header">
                <div class="header-left">
                    <p class="title">会员列表</p>
                </div>
                <div class="header-right">
                    <lin-search @query="onQueryChange" placeholder="请输入姓名"/>
                    <lin-search @query="onQueryChangeOne" placeholder="请输入手机号" style="margin-left: 20px;" />
                    <lin-search @query="onQueryChangeTwo" placeholder="请输入省份" style="margin-left: 20px;" />
                    <lin-search @query="onQueryChangeThree" placeholder="请输入城市" style="margin-left: 20px;" />
                    <lin-search @query="onQueryChangeFour" placeholder="请输入区/县" style="margin-left: 20px;" />
                    <lin-date-picker @dateChange="handleDateChange" ref="searchDate" class="date" style="margin-left: 20px;">
                    </lin-date-picker>
                </div>
            </div>
            <!-- 表格 -->
            <el-table
                border
                v-loading="loading"
                :data="tableData"
                stripe>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="member_no"
                        label="会员编号">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="phone"
                        label="手机号">
                </el-table-column>
                <el-table-column label="身份证正面">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px;"
                                :src="scope.row.just.url"
                                fit="contain" @click="openImg(scope.row.just.url)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="身份证反面">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px;"
                                :src="scope.row.back.url"
                                fit="contain" @click="openImg(scope.row.back.url)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="id_card"
                        label="身份证号">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="province"
                        label="省份">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="city"
                        label="城市">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="county"
                        label="地区">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="status_name"
                        label="状态">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="content"
                        label="说明">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="user.member_end_time"
                        label="过期时间">
                </el-table-column>
                <el-table-column
                        :show-overflow-tooltip="true"
                        prop="create_time"
                        label="申请时间">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="500">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="handleAgree(scope.row)"
                                v-if="scope.row.status === 1"
                        >审核通过</el-button>
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="handleUnAgree(scope.row)"
                                v-if="scope.row.status === 1"
                        >审核不通过</el-button>
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="handleSetBlack(scope.row)"
                                v-if="scope.row.status === 4"
                        >设置为黑名单</el-button>
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="handleEdit(scope.row)"
                                v-if="scope.row.status === 4"
                        >设置会员过期时间</el-button>
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="handleSetUnBlack(scope.row)"
                                v-if="scope.row.status === 3"
                        >取消黑名单</el-button>
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="handleEditOne(scope.row)"
                                v-if="scope.row.status === 4"
                        >会员购买记录</el-button>
                        <el-button
                                type="primary"
                                plain
                                size="mini"
                                @click="handleListOne(scope.row)"
                                v-if="scope.row.status === 4"
                        >会员余额记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :background="true"
                        :page-size="pageCount"
                        :current-page="currentPage"
                        v-if="refreshPagination"
                        layout="total,prev, pager, next, jumper"
                        :total="total_nums"
                ></el-pagination>
            </div>
        </div>
    <!-- 列表 -->
    <member-list v-else-if="showList" @listClose="listClose" :memberId="memberId" ></member-list>
    <!-- 列表 -->
    <member-money v-else-if="showListOne" @listOneClose="listOneClose" :memberId="memberId" ></member-money>
    <!-- 修改页面 -->
    <member-edit v-else-if="showEdit" @editClose="editClose" :memberId="memberId" ></Member-edit>
</template>
<script>
import member from '@/models/member'
import LinSearch from '@/components/base/search/lin-search'
import MemberEdit from './MemberEdit'
import MemberList from './MemberList'
import MemberMoney from './MemberMoney'
import LinDatePicker from '@/components/base/date-picker/lin-date-picker'

export default {
  components: {
    LinSearch,
    MemberEdit,
    MemberList,
    MemberMoney,
    LinDatePicker,
  },
  data() {
    return {
      tableData: [],
      showEdit: false,
      showList: false,
      showListOne: false,
      memberId: 0,
      loading: false,
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 10, // 每页10条数据
      total_nums: 0, // 分组内的总数
      province: '', // 搜索的省份
      city: '', // 搜索的城市
      county: '', // 搜索的区县
      searchDate: ['', ''],
      search: {
        name: '',
        phone: '',
      },
    }
  },
  created() {
    this.loading = true
    // 获取数据
    this._getTableData(this.currentPage, this.pageCount)
  },
  methods: {
    openImg(img_url) {
      this.$imagePreview({ images: [img_url], index: 0 })
    },
    handleAgree(val) {
      this
        .$confirm('此操作将审核通过该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const info = {
            id: val.id,
            status: 4,
            content: '',
          }
          this.loading = true
          const res = await member.updateMember(info)
          if (res.error_code === 0) {
            this.$message.success(`${res.msg}`)
          }
          this._getTableData(this.currentPage, this.pageCount)
        })
    },
    handleUnAgree(val) {
      this.$prompt('请输入理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async ({ value }) => {
        const info = {
          id: val.id,
          status: 2,
          content: value,
        }
        this.loading = true
        const res = await member.updateMember(info)
        if (res.error_code === 0) {
          this.$message.success(`${res.msg}`)
        }
        this._getTableData(this.currentPage, this.pageCount)
      })
    },
    editClose() {
      this.showEdit = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    listClose() {
      this.showList = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    listOneClose() {
      this.showListOne = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    handleEditOne(val) {
      this.showList = true
      this.memberId = Number(val.id)
    },
    handleListOne(val) {
      this.showListOne = true
      this.memberId = Number(val.id)
    },
    handleSetBlack(val) {
      this.$prompt('请输入理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(async ({ value }) => {
        const info = {
          id: val.id,
          status: 3,
          content: value,
        }
        this.loading = true
        const res = await member.updateMember(info)
        if (res.error_code === 0) {
          this.$message.success(`${res.msg}`)
        }
        this._getTableData(this.currentPage, this.pageCount)
      })
    },
    handleSetUnBlack(val) {
      this
        .$confirm('此操作将把黑名单用户设置为未审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const info = {
            id: val.id,
            status: 4,
            content: '',
          }
          this.loading = true
          const res = await member.updateMember(info)
          if (res.error_code === 0) {
            this.$message.success(`${res.msg}`)
          }
          this._getTableData(this.currentPage, this.pageCount)
        })
    },
    handleEdit(val) {
      this.showEdit = true
      this.memberId = Number(val.id)
    },
    async _getTableData(start, count) {
      const res = await member.getMemberList(start, count, {
        name: this.search.name, phone: this.search.phone, province: this.province, city: this.city, county: this.county, start: this.searchDate[0], end: this.searchDate[1],
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 搜索姓名
    onQueryChange(query) {
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索手机号
    onQueryChangeOne(query) {
      this.search.phone = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索省份
    onQueryChangeTwo(query) {
      this.province = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索城市
    onQueryChangeThree(query) {
      this.city = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    // 搜索区/县
    onQueryChangeFour(query) {
      this.county = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
    handleDateChange(date) {
      this.searchDate = date
      this.loading = true
      this.currentPage = 1
      this._getTableData(
        this.currentPage,
        this.pageCount,
      )
    },
  },
}
</script>

<style lang="scss" scoped>
    .container {
        padding: 0 30px;
        .header {
            display: flex;
            width: 100%;
            overflow-x:scroll;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #dae1ed;

            .header-left {
                float: left;
                min-width: 270px;
                .title {
                    height: 59px;
                    line-height: 59px;
                    color: $parent-title-color;
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .header-right {
                float: right;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 30px;
            }
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
</style>
